<template>
  <div class="waterMeterLeftTree">
    <div class="title">
      <span>选择区域组织</span>
      <button class="titleButton" @click="clickLeft">
        <i class="el-icon-caret-left"></i>
      </button>

    </div>
    <div class="search">
      <el-input placeholder="请输入关键字" v-model="filterText" class="searchFont" clearable>
      </el-input>
      <!-- <i class="el-icon-d-caret"></i> -->
      <!-- <button class="searchButton" @click="changeDefault">
            <i class="el-icon-d-caret"></i>
        </button> -->
      <!-- <i class="el-icon-caret-top"></i> -->
    </div>
    <!-- {{areaData}} -->
    <div class="tree-container filter-tree" style="overflow:auto;margin-right:10px;">
      <el-tree id="fixtree" class="tree el-scrollbar" :data="areaData" :props="defaultProps" :default-expand-all="defaultTree" :filter-node-method="filterNode" style="font-size:12px;" node-key="id" @node-click="handleNodeClick" ref="tree" :style="{height: scrollerHeight,overflow:'auto',minWidth:'100%'}">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>
            <i :class="data.icon"></i>&nbsp;{{ node.label }}
          </span>
        </span>
        <!-- icon-class='el-icon-folder' -->
      </el-tree>

    </div>
  </div>
</template>

<script>
import {
  getTree, //区域树--小区资料全部
} from '@/api/baseManage/flScheduleCommunity/index'
import { data } from '../../dashboard/UtilityGadget/DistributionOfCustomer.vue'
export default {
  data () { },
  // name:'waterMeterLeftTree',
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    },
  },

  methods: {
    //立即推送点击
    immediatelyPushClick () { },
    forAll (arr, isExpand) {
      arr.forEach((i) => {
        this.$refs.tree.toggleRowExpansion(i, isExpand)
        if (i.children) {
          this.forArr(i.children, isExpand)
        }
      })
    },
    expandAll () {
      this.forAll(this.areaData, true)
    },
    collapseAll () {
      this.forAll(this.areaData, false)
    },
    handleNodeClick (nodeData, node, nodeComponent) {
      this.num = 0
      this.getAreaCount(nodeData)
      this.$emit('areaNumber', 1 || this.num)
      this.treeId == '1'
        ? this.$emit('treeIdFn', nodeData.id)
        : this.$emit('areaIf', nodeData.code)
    },
    getAreaCount (nodeData) {
      this.num++
      if (nodeData.children && nodeData.children.length) {
        nodeData.children.forEach((v) => {
          this.getAreaCount(v)
        })
      }
    },
    // 点击按钮
    clickLeft () {
      this.$emit('clickClose', '点击隐藏')
    },
    // tree数据增加图标
    // getIcon(areaData){
    //     for (let i = 0; i < areaData.length; i++) {
    //         let item = areaData[i]
    //         if (item.children) {
    //             this.cengji += 1
    //             if (this.cengji === 1 ) {
    //                 item['icon'] = 'el-icon-s-home'
    //             }
    //             else if(this.cengji != 1){
    //                 item['icon'] = 'el-icon-s-promotion'
    //             }
    //             // else if(this.cengji === 3){
    //             //     item['icon'] = 'el-icon-s-custom'
    //             // }
    //             this.getIcon(item.children)
    //         }else{
    //             this.cengji = 0
    //         }
    //     }
    // },
    // 获取树资料
    async getTreeData () {
      let { data } = await getTree()

      this.$emit(
        'getTreeDefaultId',
        this.treeId == '1'
          ? data.length && data[0].id
          : data.length && data[0].code
      )
      this.treeCount = data.length
      this.areaData = data
      if (this.type) this.$emit('getTrees', data)

      this.changeLabel(this.areaData)

      if (!this.isCount) {
        this.$emit('getTreeCount', {
          treeCount: this.treeCount,
          treeId:
            this.treeId == '1'
              ? data.length && data[0].id
              : data.length && data[0].code,
        })
      }
    },
    // 转为label
    changeLabel (arr) {
      arr.forEach((item) => {
        //this.treeCount++
        for (var key in item) {
          if (item.level === '1') {
            item['icon'] = 'el-icon-s-home'
          } else if (item.level != '1') {
            item['icon'] = 'el-icon-s-promotion'
          }

          // else if(item.level === '2'){
          //     item['icon'] = 'el-icon-s-promotion'
          // }
          // else if(item.level === '3'){
          //     item['icon'] = 'el-icon-s-custom'
          // }
          if (key === 'name') {
            item['label'] = item[key]
            // delete item[key]
          }
          if (key === 'children' && item[key].length) {
            var arr1 = item[key]
            this.changeLabel(arr1)
            // this.getIcon(this.areaData)
          } else {
            if (item.level != '1') item['icon'] = 'el-icon-s-custom'
          }
        }
      })
    },
    // 刷新树
    // buildTree(){
    //     for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
    //         this.$refs.tree._getAllNodes()[i].expanded = this.defaultTree
    //     }
    // },
    //   改变展开
    changeDefault () {
      let defaultTree = this.defaultTree
      console.log(this.defaultTree)

      this.defaultTree = !defaultTree
      // 测试。。。。。。。。。。。。。。。。。测试
      this.forAll(this.areaData, defaultTree)
      // this.buildTree()
    },
    filterNode (value, data, node) {
      // 搜索所有匹配的节点，以及父子节点；
      let one = data.label.indexOf(value) !== -1
      let two =
        node.parent &&
        node.parent.data &&
        node.parent.data.label &&
        node.parent.data.label.indexOf(value) !== -1
      let three =
        node.parent &&
        node.parent.parent &&
        node.parent.parent.data &&
        node.parent.parent.data.label &&
        node.parent.parent.data.label.indexOf(value) !== -1
      let four =
        node.parent &&
        node.parent.parent &&
        node.parent.parent.parent &&
        node.parent.parent.parent.data &&
        node.parent.parent.parent.data.label &&
        node.parent.parent.parent.data.label.indexOf(value) !== -1
      let five =
        node.parent &&
        node.parent.parent &&
        node.parent.parent.parent &&
        node.parent.parent.parent.parent &&
        node.parent.parent.parent.parent.data &&
        node.parent.parent.parent.parent.data.label &&
        node.parent.parent.parent.parent.data.label.indexOf(value) !== -1
      let six =
        node.parent &&
        node.parent.parent &&
        node.parent.parent.parent &&
        node.parent.parent.parent.parent &&
        node.parent.parent.parent.parent.parent &&
        node.parent.parent.parent.parent.parent.data &&
        node.parent.parent.parent.parent.parent.data.label &&
        node.parent.parent.parent.parent.parent.data.label.indexOf(value) !== -1
      let seven =
        node.parent &&
        node.parent.parent &&
        node.parent.parent.parent &&
        node.parent.parent.parent.parent &&
        node.parent.parent.parent.parent.parent &&
        node.parent.parent.parent.parent.parent.parent &&
        node.parent.parent.parent.parent.parent.parent.data &&
        node.parent.parent.parent.parent.parent.parent.data.label &&
        node.parent.parent.parent.parent.parent.parent.data.label.indexOf(
          value
        ) !== -1
      let result_one = false,
        result_two = false,
        result_three = false,
        result_four = false,
        result_five = false,
        result_six = false,
        result_seven = false

      if (node.level === 1) {
        result_one = one
      } else if (node.level === 2) {
        result_two = one || two
      } else if (node.level === 3) {
        result_three = one || two || three
      } else if (node.level === 4) {
        result_four = one || two || three || four
      } else if (node.level === 5) {
        result_five = one || two || three || four || five
      } else if (node.level === 6) {
        result_six = one || two || three || four || five || six
      } else if (node.level === 7) {
        result_seven = one || two || three || four || five || six || seven
      }
      return (
        result_one ||
        result_two ||
        result_three ||
        result_four ||
        result_five ||
        result_six ||
        result_seven
      )
      // 仅搜索匹配到的节点
      /*  if (!value) return true
      return data.label.indexOf(value) !== -1 */
    },
  },
  created () {
    this.getTreeData()
  },
  computed: {
    scrollerHeight: function () {
      return window.innerHeight - 250 + 'px'
    },
  },
  props: {
    treeId: {
      type: String,
      default: '0',
    },
    areaNumber: {
      type: Function,
      default: () => { },
    },
    treeIdFn: {
      type: Function,
      default: () => { },
    },
    getTreeCount: {
      type: Function,
      default: () => { },
    },
    getTreeDefaultId: {
      type: Function,
      default: () => { },
    },
    areaIf: {
      type: Function,
      default: () => { },
    },
    getTrees: {
      type: Function,
      default: () => { },
    },
    type: {
      default: '',
      type: String,
    },
    isCount: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      num: 0,
      treeCount: 0,
      cengji: 0,
      //   显示开关
      //   小区资料数据
      areaData: [],
      //   展开开关
      defaultTree: false,
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
}
</script>

<style lang="scss" scoped>
.waterMeterLeftTree {
  /deep/.el-tree-node__content {
    padding: 0 !important;
    height: 32px;
  }
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  padding: 2px;
  // height: 85vh;
  // height: 100vh;
  max-width: 100%;
  // max-height: 200px;
  overflow:scroll .filter-tree {
    font-size: 12px !important;
    margin-right: 10px !important;
  }
  // -----------------
  /deep/ .el-tree {
    // max-height: 200px;
    // overflow-y: scroll;
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
  #fixtree {
    display: inline-block;
  }

  // ---------------------------
  // 树形连线
  // .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before
  /* 树形结构节点添加连线 */
  .tree /deep/ .el-tree-node {
    position: relative;
    padding-left: 18px;
    //   .el-tree-node__content{
    //       padding-left: 15px !important;
    //   }
  }

  .tree /deep/ .el-tree-node__children {
    padding-left: 16px;
  }

  .tree /deep/ .el-tree-node :last-child:before {
    height: 38px;
  }

  .tree /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .tree /deep/ .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .tree /deep/ .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  // .tree /deep/ .el-tree-node__expand-icon.is-leaf {
  //   display: none;
  // }

  .tree /deep/ .el-tree-node:before {
    border-left: 1px dashed #b8b9bb;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .tree /deep/ .el-tree-node:after {
    border-top: 1px dashed #b8b9bb;
    height: 20px;
    top: 12px;
    width: 24px;
  }

  /* 树形结构节点添加连线 */
  // .tree /deep/ .el-tree-node {
  // position: relative;
  // padding-left: 16px;
  // }

  // .tree /deep/ .el-tree-node__children {
  // padding-left: 16px;
  // // .el-tree-node{
  // // }
  // }

  // .tree /deep/ .el-tree-node :last-child:before {
  // height: 38px;
  // }

  // .tree /deep/ .el-tree > .el-tree-node:before {
  // border-left: none;
  // }

  // .tree-container /deep/ .el-tree > .el-tree-node:after {
  // border-top: none;
  // }

  // .tree /deep/ .el-tree-node:before {
  // content: "";
  // left: -4px;
  // position: absolute;
  // right: auto;
  // border-width: 1px;
  // }

  // .tree /deep/ .el-tree-node:after {
  // content: "";
  // left: -4px;
  // position: absolute;
  // right: auto;
  // border-width: 1px;
  // }
  // .tree /deep/ .el-tree-node__expand-icon.is-leaf {
  // display: none;
  // }

  // .tree /deep/ .el-tree-node:before {
  // border-left: 1px dashed #b8b9bb;
  // bottom: 0px;
  // height: 100%;
  // top: -26px;
  // width: 1px;
  // }

  // .tree /deep/ .el-tree-node:after {
  // border-top: 1px dashed #b8b9bb;
  // height: 20px;
  // top: 12px;
  // width: 24px;
  // }

  // ---------------------------------
  //有子节点 且未展开
  .el-tree /deep/ .el-icon-caret-right:before {
    background: url("../../../../static/xinzeng1.png") no-repeat 0 0;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    font-size: 10px;
    background-size: 10px;
  }
  //有子节点 且已展开
  .el-tree
    /deep/
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url("../../../../static/jian.png") no-repeat 0 0;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    font-size: 10px;
    background-size: 10px;
  }
  // 没有子节点
  .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
    background: url("../../../../static/jian.png") no-repeat 0 0;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    font-size: 10px;
    background-size: 10px;
  }

  // -----------------
  // .filter-tree{
  //     .el-tree-node{
  //         .el-tree-node__children{
  //             .el-tree-node{
  //                 .el-tree-node__content{
  //                     .el-tree-node__expand-icon + span::before {
  //                         content: url(../../../../static/img/bumen.png);
  //                     }
  //                 }
  //             }
  //         }
  //         .el-tree-node__content{
  //             .el-tree-node__expand-icon + span::before {
  //                 content: url(../../../../static/img/bumen.png);
  //             }
  //         }
  //     }
  // }
  .title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
    // font-weight: 700;
    padding: 10px 0 10px 10px;
    // .el-icon-caret-left{
    //     float:right;
    //     margin-right: -10px;
    // }
    .titleButton {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border: 0;
      padding: 0;
      margin-right: -2px;
      .el-icon-caret-left {
        margin: -10px 0px 0px 0px;
        font-size: 16px;
      }
    }
  }
  .search {
    display: flex;
    justify-content: center;
    align-items: center;
    .searchFont {
      margin: 10px 5px;
      padding: 5px 2px;
      /deep/.el-input__inner {
        // width: 166px;
        height: 30px;
        line-height: 30px;
        padding: 5px 2px;
        width: 100%;
        // line-height: 30px;
        // padding: 5px 5px;
      }
      // .el-input__suffix {
      //     .el-input__suffix-inner {
      //     border-color: none;
      //     .el-icon-circle-close:before {
      //         content: "\e79d" !important;
      //         font-size: 18px;
      //     }
      //     }
      // }
    }
    .searchButton {
      border: 0;
      padding: 0;
      float: right;
      .el-icon-d-caret {
        margin: 0;
      }
    }
  }
}
</style>
